<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<head>
    <link th:href="@{/static/js/fancybox/jquery.fancybox.min.css}" rel="stylesheet">
    <link th:href="@{/static/js/summernote/summernote.css}" rel="stylesheet">
</head>
<div  layout:fragment="content">
    <div class="row mt-10">
        <div class="col-xs-12 col-md-9 main">
            <div class="widget-question widget-article">
                <h3 class="title" th:text="${article.title}"></h3>
                <ul class="taglist-inline" th:if="${article.tags}">
                    <li th:each="tag:${article.tags}" class="tagPopup"><a class="tag"  th:href="|/topic/${tag.id}|"th:text="${tag.name}"></a></li>
                </ul>
                <div class="content mt-10">
                    <div class="quote mb-20">
                        <th:block th:text="${article.summary}"></th:block>
                    </div>
                    <div class="text-fmt">
                        <th:block th:utext="${article.content}"></th:block>
                    </div>
                    <div class="post-opt mt-30">
                        <ul class="list-inline text-muted">
                            <li>
                                <i class="fa fa-clock-o"></i>
                                发表于 <th:block th:text="${#dates.format(article.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}"></th:block>
                            </li>
                            <li>阅读 ( <th:block th:text="${article.views}"/> )</li>
                            <li th:if="${article.category!=null}">分类：<a th:href="|/articles/${article.category?.slug}|" target="_blank" th:text="${article.category.name}"></a>
                            </li>
                            <li th:if="${article.status!=2 && currentUser!=null &&(currentUser.id == article.user.id || currentUser.admin)}"><a th:href="|/article/edit/${article.id}|" class="edit" data-toggle="tooltip" data-placement="right" title="" data-original-title="进一步完善文章内容"><i class="fa fa-edit"></i> 编辑</a></li>
                        </ul>
                    </div>
                </div>
                <div class="text-center mt-10 mb-20">

                    <!--btn-lg-->
                    <button th:if="${article.support}" id="support-button" class="btn btn-success btn-ls mr-5"   th:attr="data-source_id=|${article.id}|,data-source_type=article,data-support_num=|${#sets.size(article.supports)}|" data-show_num="true"  ><span id="supportNum" th:text="${#sets.size(article.supports)}"/> 已推荐</button>
                    <button th:if="${!article.support}" id="support-button" class="btn btn-success btn-ls mr-5"   th:attr="data-source_id=|${article.id}|,data-source_type=article,data-support_num=|${#sets.size(article.supports)}|" data-show_num="true"  ><span id="supportNum" th:text="${#sets.size(article.supports)}"/> 推荐</button>
                    <button th:if="${article.user.detail.qrcode}" class="btn btn-warning btn-ls" data-toggle="modal"  th:attr="data-target=|#payment-qrcode-modal-article-${article.id}|"  ><i class="fa fa-heart-o" aria-hidden="true"></i> 打赏</button>

                    <button th:if="${article.collected}" id="collect-button" class="btn btn-default btn-ls" data-loading-text="加载中..." th:attr="data-source_id=|${article.id}|,data-source_type=article,data-collect_num=|${#sets.size(article.collections)}|" data-show_num="true"  ><span id="collectNum" th:text="${#sets.size(article.collections)}"/> 已收藏</button>
                    <button th:if="${!article.collected}" id="collect-button" class="btn btn-default btn-ls" data-loading-text="加载中..."  th:attr="data-source_id=|${article.id}|,data-source_type=article,data-collect_num=|${#sets.size(article.collections)}|" data-show_num="true" ><span id="collectNum" th:text="${#sets.size(article.collections)}"/> 收藏</button>
                </div>
                <div class="mb-10" th:if="!${#strings.isEmpty(GlobalSetting.website.shareCode)}" th:utext="${GlobalSetting.website.shareCode}"/>
            </div>
            <div class="widget-relation">
                <div class="row">
                    <div class="col-md-6">
                        <h4>你可能感兴趣的文章</h4>
                        <ul class="widget-links list-unstyled">
                            <li th:each="a:${article.relatedArticles}" th:if="${a.id != article.id}" class="widget-links-item">
                                <a th:title="${a.title}" th:href="|/article/${a.id}|" th:text="${a.title}"> </a>
                                <small class="text-muted"><th:block th:text="${a.views}"></th:block> 浏览</small>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h4>相关问题</h4>
                        <ul class="widget-links list-unstyled">
                            <li th:each="q:${article.relatedQuestions}" class="widget-links-item">
                                <a th:title="${q.title}" th:href="|/question/${q.id}|" th:text="${q.title}"></a>
                                <small class="text-muted"><th:block th:text="${#sets.size(q.answers)}"></th:block> 回答</small>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="widget-answers mt-15">
                <h2 class="h4 post-title"><th:block th:text="${#sets.size(article.comments)}"></th:block>条评论</h2>
                <div th:replace="themes/default/comment/collapse::collapse('article',${article},true)"></div>
            </div>

        </div>

        <div class="col-xs-12 col-md-3 side">
            <div class="widget-user">
                <div class="media">
                    <a class="pull-left" th:href="|/space/${article.user.id}|"><img class="media-object avatar-64" th:src="${article.user.avatar}" th:alt="${article.user.nickname}"></a>
                    <div class="media-body ">
                        <a th:href="|/space/${article.user.id}|" class="media-heading" th:text="${article.user.nickname}"></a>
                        <p th:if="${article.user.detail.title}" class="text-muted" th:text="${article.user.detail.title}"></p>
                        <p class="text-muted"><th:block th:text="${#sets.size(article.user.articles)}"></th:block> 篇文章</p>
                    </div>
                </div>
            </div>
            <div class="widget-box mt-30">
                <h2 class="widget-box-title">
                    作家榜
                    <a href="/top/articles" title="更多">»</a>
                </h2>
                <ol class="widget-top10">
                    <li th:each="topUser:${topUsers}" class="text-muted">
                        <img class="avatar-32" th:src="${topUser.avatar}">
                        <a th:href="|/space/${topUser.id}|" class="ellipsis" th:text="${topUser.nickname}"></a>
                        <span class="text-muted pull-right"><th:block th:text="${#sets.size(topUser.articles)}"></th:block> 文章</span>
                    </li>

                </ol>
            </div>
        </div>
    </div>
    <div th:if="${answer.user.detail.qrcode}" th:replace="themes/default/layout/qrcode_pament::qrcode_pament('article',${article},'如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作')"></div>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/css/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/global.js?v=20170412}"></script>
    <link th:href="@{/static/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/js/select2/css/select2-bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/static/js/summernote/summernote.min.js}"></script>
    <script th:src="@{/static/js/summernote/lang/summernote-zh-CN.min.js}"></script>
    <script th:src="@{/static/js/select2/js/select2.min.js}"></script>
    <script th:src="@{/static/js/select2/js/i18n/zh-CN.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        $(document).ready(function() {
            var article_id = [[${article.id}]];
            /*评论默认展开*/
            load_comments('article',article_id);
            $("#comments-article-"+article_id).collapse('show');

            /*评论提交*/
            $(".comment-btn").click(function(){
                var source_id = $(this).data('source_id');
                var source_type = $(this).data('source_type');
                var to_user_id = $(this).data('to_user_id');
                var token = $(this).data('token');
                var content = $("#comment-"+source_type+"-content-"+source_id).val();
                add_comment(token,source_type,source_id,content,to_user_id);
                $("#comment-content-"+source_id+"").val('');
            });


            /*文章推荐*/
            $("#support-button").click(function() {
                if(!check_login()){
                    return;
                }
                var btn_support = $(this);
                var source_type = btn_support.data('source_type');
                var source_id = btn_support.data('source_id');
                var support_num = parseInt(btn_support.data('support_num'));
                var show_num = $(this).data('show_num');
                $.get('/support/' + source_type + '/' + source_id, function (msg) {
                    if (msg == 'supported') {
                        support_num++
                        btn_support.html(support_num+' 已推荐');
                        btn_support.data('support_num', support_num);
                    }else{
                        support_num--
                        btn_support.html(support_num+' 推荐');
                        btn_support.data('support_num', support_num);
                    }


                    /*是否操作关注数*/
                    // if(Boolean(show_num)){
                    //     // var supportNum = $("#supportNum").html();
                    //     if(msg==='supported'){
                    //         $("#supportNum").html(support_num);
                    //     }else{
                    //         $("#supportNum").html(support_num);
                    //     }
                    // }
                });
            });



            /*收藏问题或文章*/
            $("#collect-button").click(function(){
                if(!check_login()){
                    return;
                }
                $("#collect-button").button('loading');
                var source_type = $(this).data('source_type');
                var source_id = $(this).data('source_id');
                var show_num = $(this).data('show_num');
                var collect_num = parseInt($(this).data('collect_num'));
                $.get('/collect/'+source_type+'/'+source_id,function(msg){
                    $("#collect-button").removeClass('disabled');
                    $("#collect-button").removeAttr('disabled');
                    if(msg=='collected'){
                        collect_num++;
                        $("#collect-button").html(collect_num+' 已收藏');
                    }else{
                        collect_num--;
                        $("#collect-button").html(collect_num+' 收藏');
                    }
                    $("#collect-button").data('collect_num', collect_num);
                    /*是否操作关注数*/
                    // if(Boolean(show_num)){
                    //     var collectNum = $("#collectNum").html();
                    //     if(msg==='collected'){
                    //         $("#supportNum").html(parseInt(collectNum)+1);
                    //     }else{
                    //         $("#supportNum").html(parseInt(collectNum)-1);
                    //     }
                    // }
                });
            });



        });
    </script>
</div>